<template>
  <div class="salary-discussion">
    <!-- 原有内容 -->
    <ZuiXinChou />
    <div class="salary-grid">
      <ZuiXinChouCard />
    </div>

    <!-- 筛选条件面板 -->
    <div class="filter-panel">
      <div class="filter-header">
        <span>筛选条件</span>
        <el-button type="text" @click="collapse">收起 ^</el-button>
      </div>

      <div class="filter-tags">
        <el-tag closable @close="removeTag('productManager')">产品经理</el-tag>
        <el-tag closable @close="removeTag('beijing')">北京</el-tag>
        <el-tag closable @close="removeTag('salary')">30-40万</el-tag>
        <el-button type="danger" size="small" @click="clearFilters">清除筛选</el-button>
      </div>

      <div class="filter-selects">
        <div class="select-group">
          <label>公司</label>
          <el-select v-model="company" placeholder="请选择公司" clearable>
            <el-option label="腾讯" value="腾讯" />
            <el-option label="阿里" value="阿里" />
            <el-option label="百度" value="百度" />
          </el-select>
        </div>

        <div class="select-group">
          <label>职位</label>
          <el-select v-model="position" placeholder="请选择职位" clearable>
            <el-option label="软件工程师" value="软件工程师" />
            <el-option label="产品经理" value="产品经理" />
            <el-option label="UI设计师" value="UI设计师" />
          </el-select>
        </div>

        <div class="select-group">
          <label>职级</label>
          <el-select v-model="level" placeholder="请选择职级" clearable>
            <el-option label="P6" value="P6" />
            <el-option label="P7" value="P7" />
            <el-option label="P8" value="P8" />
          </el-select>
        </div>

        <div class="select-group">
          <label>薪酬范围</label>
          <el-select v-model="salaryRange" placeholder="请选择薪酬范围" clearable>
            <el-option label="全部范围" value="全部范围" />
            <el-option label="10-20万" value="10-20万" />
            <el-option label="20-30万" value="20-30万" />
            <el-option label="30-40万" value="30-40万" />
          </el-select>
        </div>

        <div class="select-group">
          <label>地点</label>
          <el-select v-model="location" placeholder="请选择地点" clearable>
            <el-option label="全部地点" value="全部地点" />
            <el-option label="北京" value="北京" />
            <el-option label="上海" value="上海" />
            <el-option label="深圳" value="深圳" />
          </el-select>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <div class="chart-item">
        <h3>产品经理薪资分布</h3>
        <div ref="pieChart" class="chart"></div>
      </div>
      <div class="chart-item">
        <h3>薪资趋势变化</h3>
        <div ref="lineChart" class="chart"></div>
      </div>
    </div>

    <!-- 新增的统计卡片区域 -->
<div class="stats-cards">
  <el-card class="stat-card" shadow="never">
    <div class="card-content">
      <div class="icon-wrapper">
        <el-icon><Circle /></el-icon>
      </div>
      <div class="text">
        <div class="label">平均薪资</div>
        <div class="value">35万</div>
      </div>
    </div>
  </el-card>

  <el-card class="stat-card" shadow="never">
    <div class="card-content">
      <div class="icon-wrapper">
        <el-icon><Plus /></el-icon>
      </div>
      <div class="text">
        <div class="label">薪资增长</div>
        <div class="value">+12%</div>
      </div>
    </div>
  </el-card>

  <el-card class="stat-card" shadow="never">
    <div class="card-content">
      <div class="icon-wrapper">
        <el-icon><User /></el-icon>
      </div>
      <div class="text">
        <div class="label">样本数量</div>
        <div class="value">1,234</div>
      </div>
    </div>
  </el-card>

  <el-card class="stat-card" shadow="never">
    <div class="card-content">
      <div class="icon-wrapper">
        <el-icon><Star /></el-icon>
      </div>
      <div class="text">
        <div class="label">热门职位</div>
        <div class="value">产品经理</div>
      </div>
    </div>
  </el-card>
</div>


  </div>
</template>

<script>
import ZuiXinChou from '@/components/ZuiXinChou.vue'
import ZuiXinChouCard from '@/components/ZuiXinChouCard.vue'
import * as echarts from 'echarts'

export default {
  name: 'SalaryDiscussion',
  components: {
    ZuiXinChou,
    ZuiXinChouCard
  },
  data() {
    return {
      company: '腾讯',
      position: '软件工程师',
      level: 'P6',
      salaryRange: '全部范围',
      location: '全部地点'
    }
  },
  methods: {
    removeTag(tag) {
      console.log(`移除标签: ${tag}`)
    },
    clearFilters() {
      this.company = ''
      this.position = ''
      this.level = ''
      this.salaryRange = ''
      this.location = ''
    },
    collapse() {
      alert('收起功能')
    },
initPieChart() {
  const pieChart = echarts.init(this.$refs.pieChart)
  const option = {
    title: {
      text: '产品经理薪资分布',
      subtext: '不同公司对比',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal'
      },
      subtextStyle: {
        fontSize: 12,
        color: '#999'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}万 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'center',
      data: [
        { name: '网易', icon: 'circle' },
        { name: '腾讯', icon: 'circle' },
        { name: '阿里', icon: 'circle' },
        { name: '字节', icon: 'circle' },
        { name: '美团', icon: 'circle' }
      ],
      textStyle: {
        fontSize: 12
      }
    },
    series: [
      {
        name: '薪资分布',
        type: 'pie',
        radius: '50%',
        center: ['50%', '50%'],
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {d}%'
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 20
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        data: [
          { value: 30, name: '网易', itemStyle: { color: '#409eff' } },
          { value: 35, name: '腾讯', itemStyle: { color: '#67c234' } },
          { value: 38, name: '阿里', itemStyle: { color: '#e6a23c' } },
          { value: 42, name: '字节', itemStyle: { color: '#f56c6c' } },
          { value: 32, name: '美团', itemStyle: { color: '#909399' } }
        ]
      }
    ]
  }
  pieChart.setOption(option)
},
    initLineChart() {
      const lineChart = echarts.init(this.$refs.lineChart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['01月', '04月', '07月', '10月', '01月']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}万'
          }
        },
        series: [
          {
            name: '薪资',
            type: 'line',
            smooth: true,
            areaStyle: {},
            data: [28, 31, 33, 36, 38]
          }
        ]
      }
      lineChart.setOption(option)
    }
  },
  mounted() {
    this.initPieChart()
    this.initLineChart()
  }
}
</script>

<style scoped>
.salary-discussion {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.salary-grid {
  margin-bottom: 20px;
}

.filter-panel {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-bottom: 20px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.filter-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.select-group {
  margin-bottom: 16px;
  min-width: 0;
}

.select-group label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.el-select {
  width: 100%;
  max-width: 200px;
}

.filter-selects {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.el-select .el-input__inner {
  border-radius: 4px;
}

/* 图表容器样式 */
.charts-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.chart-item {
  flex: 1;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-item h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
}

.chart {
  width: 100%;
  height: 300px;
}

.stats-cards {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 16px;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.card-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-wrapper {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e6f7ff;
  color: #409eff;
}

.stat-card:nth-child(2) .icon-wrapper {
  background-color: #ecf5ff;
  color: #67c234;
}

.stat-card:nth-child(3) .icon-wrapper {
  background-color: #f3e6ff;
  color: #9a67d8;
}

.stat-card:nth-child(4) .icon-wrapper {
  background-color: #fff8e6;
  color: #f56c6c;
}

.text {
  flex: 1;
}

.label {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
</style>